import React from 'react';
import {Dimensions, View} from "react-native";
import {Svg, Image, Defs, ClipPath, Rect, G} from "react-native-svg";

const {width, height} = Dimensions.get('window')

export default class ProgressImage extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: `进度条图片`,
  });

  render() {
    return (
      <View style={{backgroundColor: 'red', flex: 1}}>
        <Svg width={width} height={height}>
          <Defs>
            <ClipPath id="clip">
              <Rect
                x={0}
                y={0}
                width={200}
                height={40}
              />
            </ClipPath>
          </Defs>

          <Image
            x={0}
            y={0}
            height={40}
            width={375}
            href={require('./fone.png')}
          />
          <Image
            x={0}
            y={0}
            height={40}
            width={375}
            href={require('./ftwo.png')}
            clipPath="url(#clip)"
          />

        </Svg>
      </View>
    )
  }
}
